```jsx
import * as radio from "@zag-js/radio-group"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { Index, createMemo, createUniqueId } from "solid-js"

const items = [
  { label: "React", value: "react" },
  { label: "Angular", value: "ng" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
]

function Radio() {
  const service = useMachine(radio.machine, { id: createUniqueId() })

  const api = createMemo(() => radio.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div {...api().getIndicatorProps()} />
      <Index each={items}>
        {(item) => (
          <label {...api().getItemProps({ value: item().value })}>
            <span {...api().getItemTextProps({ value: item().value })}>
              {item().label}
            </span>
            <input
              {...api().getItemHiddenInputProps({ value: item().value })}
            />
          </label>
        )}
      </Index>
    </div>
  )
}
```
